import React,{useState} from 'react'
import '../assets/css/commons.scss'
import '../assets/css/shopcart.scss'
import {order} from '../utils/ary'
export default function Shopcart() {
  //使用useState将购物车列表信息存入state中
  const [list,setList]=useState(()=>[
    {
        id:'1001',
        name:'商品1',
        price:23,
        num:3,
        checked:false
    },
    {
        id:'1002',
        name:'商品2',
        price:13,
        num:1,
        checked:false
    },
    {
        id:'1003',
        name:'商品3',
        price:35,
        num:5,
        checked:false
    }
  ])
  //使用useState将显示升降序存放state
  const [desc,setDesc]=useState(true)
  const [numDesc,setNumDesc]=useState(true)
  const [all,setAll]=useState(false)



  //价格排序,ES6参数默认值
  const priceSort=(type='desc')=>{
    //排序操作
    switch(type){
        case 'desc':
            list.sort(order('price','DESC'))
            setList([...list])
            setDesc(false)
            break
        case 'asc':
            list.sort(order('price'))
            setList([...list])
            setDesc(true)
            break
    }
  }

  const numSort=(type='desc')=>{
    //排序操作
    switch(type){
        case 'desc':
            list.sort(order('num','DESC'))
            setList([...list])
            setNumDesc(false)
            break
        case 'asc':
            list.sort(order('num'))
            setList([...list])
            setNumDesc(true)
            break
    }
  }
  const changeNum=(index,type)=>{
    switch(type){
        case '+':
            list[index].num++
            break
        case '-':
            if( list[index].num<=1){
                alert('数量不能少于1')
            }else{
                list[index].num--
            }
            break
    }
    setList([...list])
  }

  const inputNum=(index,e)=>{
    //更新数据
    list[index].num=e.target.value
    setList([...list])
  }
  //完成总价计算的箭头函数
  const total=list.filter(item=>item.checked).reduce((pre,cur)=>pre+cur.price*cur.num,0)

  //勾选商品信息
  const selectItem=(index,e)=>{
     if(e.target.checked){
        //准备勾选
        list[index].checked=true
     }else if(!e.target.checked){
        //准备取消勾选
        list[index].checked=false
     }
     //判断数据中的每一项是checked值是否是true
     let isAll=list.every(item=>item.checked)
     if(isAll){
        setAll(true)
     }else{
        setAll(false)
     }
     



     setList([...list])
     



  }
  //全选或反选
  const selectAll=(e)=>{
    if(e.target.checked){
        //准备全选
        const newList=list.map(item=>{
            //循环的时候将当前项的checked的值全部变成true
            item.checked=true
            return item
        })
        setList(newList)
        setAll(true)
    }else{
        //准备反选
        const newList=list.map(item=>{
            //循环的时候将当前项的checked的值全部变成true
            item.checked=false
            return item
        }) 
        setList(newList)
        setAll(false)
    }
    
  }
  return (
    <div>
        <h1>购物车列表</h1>
        <table>
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" onChange={selectAll} checked={all}/>
                    </td>
                    <td>编号</td>
                    <td>名称</td>
                    <td>
                        价格
                        {desc?<i className='iconfont icon-jiangxu' onClick={()=>{priceSort()}}></i>:<></>}
                        {!desc?<i className='iconfont icon-shengxu' onClick={()=>{priceSort('asc')}}></i>:<></>}
                    </td>
                    <td>数量
                        {numDesc?<i className='iconfont icon-jiangxu' onClick={()=>{numSort()}}></i>:<></>}
                        {!numDesc?<i className='iconfont icon-shengxu' onClick={()=>{numSort('asc')}}></i>:<></>}
                    </td>
                    <td>小计</td>
                </tr>
            </thead>
            <tbody>
                {
                    list.map((item,index)=><tr key={item.id}>
                        <td>
                            <input type='checkbox' checked={item.checked} onChange={(e)=>{selectItem(index,e)}}/>
                        </td>
                        <td>{item.id}</td>
                        <td>{item.name}</td>
                        <td>{item.price}</td>
                        <td>
                            <button className='changeBtn'  onClick={()=>{changeNum(index,'-')}}>-</button>
                            <input type="text" value={item.num} className="inputNum" onChange={(e)=>{inputNum(index,e)}}/>
                            <button className='changeBtn' onClick={()=>{changeNum(index,'+')}}>+</button>
                        </td>
                        <td>{item.price*item.num}</td>
                    </tr>)
                }
            </tbody>
            <tfoot>
                <tr>
                    <td colSpan={6}>总价:{total}</td>
                </tr>
            </tfoot>
        </table>
    </div>
  )
}
